/*****
 * 选择标签组件
 */
import { useEffect, useMemo, useState } from "react";
import CommonModal from "../CommonModal";
import CommonLoading from "../CommonLoading";
import SetTag from "./SetTag";
import { Checkbox, Button, Radio, Space, Input } from "antd";
import { TagOutlined } from "@ant-design/icons";
import { filter } from "lodash";
import Api from "./service";
import Iconfont from "@/components/IconFont";
import styles from "./index.module.less";
import { labelTypeMap, labelColorMap } from "@/utils/config";
import Typography from '@/pages/OrderModule/common/components/Typography';


const CheckboxGroup = Checkbox.Group;

//title
const RenderTitle = props => {
	return (
		<div className={styles.titleWrap}>
			<div className={styles.titleLeft}></div>
			<div className={styles.titleContent}>{props.title}</div>
		</div>
	);
};

const SelectTag = props => {
	const {
		title = "选择标签",
		showFilterMethod = true,
		filterTag = [],
		renderCustomEl,
		handleOK,
		handleCancel,
		handleDealData,
		selectLabels
	} = props;

	//选择标签模式，or:任意一个，and：包含所有
	const [tagMode, setTagMode] = useState("or");

	//标签列表
	const [tagList, setTagList] = useState([]);

	//搜索框内容
	const [inputVal, setInputVal] = useState();

	//选择标签
	const [selectTag, setSelectTag] = useState([]);

	const [open, setOpen] = useState(false);

	const [tagVisible, setTagVisible] = useState(false);

	const [loading, setLoading] = useState(false);

	//真正用于渲染的标签列表
	const realData = useMemo(() => {
		if (inputVal) {
			return filter(tagList, val => !filterTag.includes(val.id) && val.name.includes(inputVal));
		}
		return filter(tagList, val => !filterTag.includes(val.id));
	}, [filterTag, inputVal, tagList]);

	//初始化获取标签列表
	useEffect(() => {
		setOpen(true);
		getTagList();
	}, []);

	useEffect(() => {
		if (selectLabels.length) {
			setSelectTag(selectLabels);
		}
	}, [selectLabels]);

	//获取标签列表
	const getTagList = async () => {
		setLoading(true);
		const { success, data } = await Api.queryTagList();
		setLoading(false);
		if (success) {
			setTagList(data);
		}
	};

	//选择模式
	const renderTagMode = () => {
		return (
			<>
				<RenderTitle title="筛选方式" />
				<Radio.Group onChange={e => setTagMode(e.target.value)} value={tagMode}>
					<Space direction="vertical">
						<Radio value="or">
							包含任意一个标签
                            <Typography type="info">（多个标签用逗号隔开）</Typography>
						</Radio>
						<Radio value="and">
							同时包含指定标签
                            <Typography type="info">（多个标签用&连接）</Typography>
						</Radio>
					</Space>
				</Radio.Group>
			</>
		);
	};

	//标签组
	const renderTag = () => {
		const [indeterminate, setIndeterminate] = useState(true);
		const [checkAll, setCheckAll] = useState(false);
		//单选变更
		const onChange = list => {
			setSelectTag(list);
			setIndeterminate(!!list.length && list.length < realData.length);
			setCheckAll(list.length === realData.length);
		};

		//全选事件
		const onCheckAllChange = e => {
			setSelectTag(e.target.checked ? realData.map(v => v.id) : []);
			setIndeterminate(false);
			setCheckAll(e.target.checked);
		};
		return (
			<div style={{ marginTop: "24px" }}>
				<Input
					style={{ marginBottom: "16px" }}
					value={inputVal}
					onChange={e => setInputVal(e.target.value)}
					placeholder="请输入标签内容"
				/>
				<div className={styles.checkAll}>
					<RenderTitle title="选择标签" />
					<Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
						全选
					</Checkbox>
				</div>
				<CheckboxGroup className={styles.checkWrap} value={selectTag} onChange={onChange}>
					{realData.map(v => {
						return (
							<Checkbox className={styles.checkBox} value={v.id} key={v.id}>
								{labelTypeMap[v.name] ? (
									<div>
										<Iconfont className={styles.iconBox} type={labelTypeMap[v.name]} />
										<span>{labelColorMap[v.name]}</span>
									</div>
								) : (
									<span>{v.name}</span>
								)}
							</Checkbox>
						);
					})}
				</CheckboxGroup>
			</div>
		);
	};

	//是否触发ok事件
	let triggerEvent = false;

	//点击确定
	const onOk = () => {
		triggerEvent = true;
		setOpen(false);
		const res = handleDealData(selectTag, realData);
		afterClose(res);
	};

	//点击取消
	const onCancel = () => {
		triggerEvent = false;
		setOpen(false);
	};

	//关闭弹框
	const afterClose = res => {
		if (triggerEvent) {
			//在此抛出需要的参数
			handleOK && handleOK(res);
		} else {
			handleCancel && handleCancel();
		}
	};

	//维护自定义标签弹框
	const SetTagProps = {
		handleCancel() {
			setTagVisible(false);
			getTagList();
		}
	};

	return (
		<CommonModal
			title={title}
			open={open}
			afterClose={afterClose}
			width="900px"
			onCancel={onCancel}
			footer={
				<div className={styles.footer}>
					<div className={styles.operaWrap} onClick={() => setTagVisible(true)}>
						<TagOutlined className={styles.operaIcon} />
						维护自定义标签
					</div>
					<div>
						<Button onClick={onCancel}>取消</Button>
						<Button onClick={onOk} type="primary">
							确定
						</Button>
					</div>
				</div>
			}
		>
			{renderCustomEl && renderCustomEl()}
			{showFilterMethod && renderTagMode()}
			{renderTag()}
			{tagVisible && <SetTag {...SetTagProps} />}
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default SelectTag;
